<template>
	<view class="content"> 
		<view  class="head_nav" :style="{background: 'url('+ bgurl +'/policy/user_img/my_bg.png)'}"> 
			<view class="navs" >
				<!-- <image style="width: 100%;position: absolute; z-index: -1;" src="@/static/picture/indexbg.png" mode="widthFix" lazy-load></image> -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="wid" :style="{height: `${statusBarHeight}px`}"></view>
				<!-- #endif --> 
				<!-- #ifdef MP-WEIXIN -->
				<view class="navbar"  :style="{height: `${titleBarHeight}px`}"> 
					<view class="left"  :style="{lineHeight: `${titleBarHeight}px` }" @click="goBack">
						<uv-icon name="arrow-left" color="#fff" size="18"></uv-icon> 
					</view> 
					<view class="ft32" style="text-align: center;">技师</view> 
				</view>  
				<!-- #endif --> 
			</view>
			<view class="tabsnav"> 
				<uv-tabs   class="tabs" :list="tab2" lineWidth="45"  lineHeight='3' lineColor="#FFBF00"   :current='tabindex'
				:activeStyle="{ color: '#FFFFFF',fontWeight: 'bold',transform: 'scale(1.05)'}"
				:inactiveStyle="{color: '#FFFFFF',transform: 'scale(1)'}"
				itemStyle="height: 84rpx;font-size:28rpx" 
					@change="tabChange2"
					></uv-tabs> 
			</view>
		 </view>  
		 <!-- 技师列表 -->
		 <!-- #ifndef H5 -->
		 <view class="userList" :style="{marginTop:'calc(100rpx + '+ allBarHeight+'px)'}">
		 <!-- #endif --> 
		 <!-- #ifdef H5 -->
		 <!-- <view class="userList" :style="{marginTop:'calc(80rpx + '+ allBarHeight+'rpx)'}"> -->
		  <view class="userList" style="margin-top: 100rpx;">
		 <!-- #endif -->  
			  <!-- 技师列表 -->
			 <list v-if="total>0" :projectList='project' @godetails='godetails' @collect='collect' @reserve='reserve'></list>  
			 <empty v-else-if="total==0" title="没有相关技师"></empty>
			 <uv-load-more :status="isLoading" fontSize='12' color='#696969' nomoreText=' '/>
		 </view>
		 <!-- 预约弹窗 --> 
		 <uv-popup mode='bottom'  zIndex='991' round="12" duration='300' closeable ref="popup" >
				<subscribeList ref="cou" :state="stateindex" :projectList="projectLists" :projectInfo="projectInfo"   @addProject='placeOrder'  @goInfor='goInfor'></subscribeList>
		 </uv-popup>
	</view>
</template>

<script>
	import { projectList,massagistList,massagistDetails ,dictType,geturl,isToken,collection} from '@/utils/api.js'
	import badgeMix from '@/common/mixins.js' 
	import subscribeList from '@/components/subscribe-list.vue' 
	import empty from '@/components/empty.vue'
	import list from '@/components/technician-list.vue'
	import { string } from '../../uni_modules/uv-ui-tools/libs/function/test'
	import config from '@/config.js' 
	import { toast } from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	export default {
		mixins: [badgeMix],
		components:{list,subscribeList,empty},
		data() {
			return {
				titleBarHeight:this.titleBarHeight,
				statusBarHeight:this.statusBarHeight,
				allBarHeight:this.allBarHeight, 
				safeareaHeight:this.safeareaHeight,  
				stateindex:'0',
				columns: [
					['太原市',]
				], 
				pickers:'请选择',
				tab1: [],
				tab2: [],
				tabindex:'0',
				isShow:true,
				projectLists:[],
				projectInfo:{}, 
				project:[],
				isLoading:'nomore',  //是否加载中
				pageNum:1,//请求的页码
				pageSize:10,//请求的条数 
				total:1,
				serviceId:'', //项目id
				pageshow:{},
				bgurl:config.imageUrl,
			}
		},
		onShow() { 
			
		},
		onLoad(option) { 
			console.log(option.state);
			this.pageshow = option 
			this.serviceId = option.id
			this.tabList(this.pageshow.state) 
		},
		methods: {   
			// 项目tab栏数据
			tabList(state,id){  
				const  datas = {
					"current": 1,  //页码
					"size": 20,   //条数
					// #ifdef MP-WEIXIN
					"source" : 'WeChatMini',
					"version" : config.appInfo.version
					// #endif  
				} 
				projectList(datas).then((res) => { 
					if(res.code == '200'){
						this.project = []
						this.pageNum = 1
						this.tab2 = res.result.records    
						this.tab2.forEach((item,index)=>{
							if(item.id == this.serviceId){
								this.tabindex = index
								this.getjsList(item.id,'')
							}
						})
					}
				}) 
			}, 
			// 技师列表
			getjsList(serviceId,levelId){
				this.isLoading = 'loading' 
				const  datas = {
					"current": this.pageNum,  //页码
					"size": this.pageSize,   //条数
					// "lon":uni.getStorageSync('longitude'),  //经度
					// "lat":uni.getStorageSync('latitude'),  //纬度
					"lon":uni.getStorageSync('longitude'),  //经度
					"lat":uni.getStorageSync('latitude'),  //纬度
					"serviceId":serviceId,  //项目id 
					"type":levelId, //技师级别id 
					"massagistName":"",
					"cityId":uni.getStorageSync('cityId'),
					// #ifdef MP-WEIXIN
					"source" : 'WeChatMini',
					"version" : config.appInfo.version
					// #endif
				} 	
				massagistList(datas).then((res) => {
					console.log(res);  
					if(res.code == '200'){
						this.project = res.result.records
						this.total = res.result.total 
						this.isLoading = 'nomore' 
						// const data = res.result.records  
						// this.project = [...this.project,...data]
						// console.log(data);
						// this.total = res.result.total 
						// this.isLoading = data.length < this.pageSize ? 'nomore' : '';  
					}
				})  
			},
			// 技师级别筛选
			tabChange1(e,state){ 
				this.project = []
				this.pageNum = 1
				this.getjsList('',e.dictValue) 
			},
			// 项目筛选
			tabChange2(e,state){
				this.project = []
				this.pageNum = 1 
				this.serviceId = e.id
				this.getjsList(e.id,'') 
			},
			// 技师搜索
			goSearch(){
				uni.navigateTo({
					url:'/pages/technician/searchs'
				})
			},
			// 选择地址
			openPicker() {
				this.$refs.picker.open();
			},
			// 立即预约弹窗
			async reserve(item,index){
				this.enterPrecontract(item.id).then((res)=>{
					if(res == 200){
						// 技师详情
						uni.navigateTo({
							url:`/pages/order/orderPay?pid=${this.serviceId}&mid=${item.id}&num=1`
						}) 
					}else if(res.code == 8001){
						toast(res.message)
						setTimeout(()=>{
							this.getjsList(this.serviceId,'')  
						},1000)
					}
				})  
			},
			// 项目详情
			goInfor(projectId){  
				this.$refs.popup.close(); 
				uni.navigateTo({
					url:'/pages/index/details?id='+projectId
				})
			},
			// 立即预约
			placeOrder(addOrderId,num,mid){ 
				this.$refs.popup.close();
				uni.navigateTo({
					url:`/pages/order/orderPay?pid=${addOrderId}&mid=${mid}&num=${num}`
				})  
			},
			// 技师详情
			godetails(item,index){
				uni.navigateTo({
					url:'/pages/technician/userDetail?id='+item.id
				})
			},
			// 技师收藏
			collect(item){
				console.log(item);
				this.isCollect(item.id).then((res)=>{
					item.userCollectionFlag = !item.userCollectionFlag
					item.userCollectionFlag?item.followCount=item.followCount+1:item.followCount!=0?item.followCount=item.followCount-1:item.followCount 
					// this.project = []
					// this.pageNum = 1
					// this.getjsList(this.serviceId,'') 
				}) 
			}, 
			confirm(e) {
				console.log('confirm', e.value[0]);
				this.pickers = e.value[0]
			}, 
		},
		// 上拉刷新
　　onReachBottom() {  
			//如果最后一次请求，数据为空的话就停止请求，防止多次触发接口
			if(this.isLoading=='nomore'){
				return;
			}
			this.pageNum++
			//调用请求接口
			this.getjsList(this.serviceId,'')  
		},
	}
</script>

<style lang="scss">
	page{
		background-color:$uni-main-page ;
	}
	::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
		} 
	.head_nav{
		position: fixed;
		top: 0;
		width: 750rpx;	
		// height:calc( var(--status-bar-height) + 50px);  
		background-size: 100% auto !important;
		box-sizing: border-box; 
		overflow: hidden;
		z-index: 999;
		.navs{
			// #ifdef MP-WEIXIN
			padding-bottom:10rpx ;
			// #endif 
			// padding-bottom:20rpx ;
		}
		.navbar{
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			width: 690rpx;
			text-align: center;
			font-size: 40rpx;
			color: #fff;   
			.left{
				position: absolute;
				left: 40rpx;
			}
		} 
	}
	.tabsnav{
		// position: fixed;
		// margin-top: -5rpx;
		width: 750rpx;	 
		/*  #ifdef  H5  */
		padding-top: 10rpx;
		/*  #endif  */ 
		// background-color: #fff;
		border-radius: 12rpx 12rpx 0rpx 0rpx; 
	} 
	.userList{
		position: relative;
		width: 690rpx;
		padding: 16rpx 30rpx; 
		margin-top: 90rpx;
		// margin-top:calc( var(--status-bar-height) + 105px);
		.user_item{
			position: relative;
			width:650rpx;
			padding: 20rpx;
			margin-bottom: 16rpx;
			background-color: #fff;
			border-radius: 12rpx;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.1);
			.user_name{
				max-width: 160rpx;
			}
			.user_collect{
				margin-left: 12rpx;
				font-size: 24rpx;
				color: #696969;
				image{
					width: 28rpx;
					height: 26rpx;
				}
			}
			.picture{
				position: relative;
				width: 160rpx;
				height: 160rpx;
				border-radius:50%;
				overflow: hidden; 
				image{
					width: 100%;
				}
				.label{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 160rpx;
					background-color: rgba(0,0,0,0.4);
					font-size: 28rpx;
					color: #fff;
					text-align: center;
					line-height: 160rpx;
				}
			} 
			.img_tip{
				width: 20rpx;
				height: 22rpx;
				margin-right: 4rpx;
			}
			.item_float{
				position: absolute;
				right: 20rpx; 
				padding: 10rpx 14rpx;
				// background: rgba(154, 193, 255, .3) ;
				background: $uni-main-near;
				border-radius: 4rpx;
				color: $uni-main;
				font-size: 22rpx;
				// opacity: 0.3;
			}
			.item_btn{
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
				width: 176rpx;
				height: 50rpx; 
				background-color: $uni-main;
				border-radius: 30rpx;
				text-align: center;
				line-height: 50rpx;
				font-size: 24rpx;
				color: #fff;
			}
		}
	}
</style>
